<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header height="45px" style="margin-bottom: 0px">
      <span>乡村劳动力就业辅助系统</span>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
        <el-menu-item index="/homepage">首页</el-menu-item>
        <el-menu-item index="/employment">就业</el-menu-item>
        <el-menu-item index="/enterprise">创业</el-menu-item>
        <el-menu-item index="/forum">论坛</el-menu-item>
        <el-menu-item index="/policy">政策</el-menu-item>
        <el-menu-item index="/analysis">分析</el-menu-item>
      </el-menu>
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="就业信息" value="1"></el-option>
          <el-option label="创业信息" value="2"></el-option>
          <el-option label="相关政策" value="3"></el-option>
          <el-option label="论坛" value="4"></el-option>
        </el-select>
        <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <div v-show="isLogin">
        <el-link href="http://localhost:8080/#/login" target="_blank" style="margin-right:10px">登录</el-link>
        <el-link href="http://localhost:8080/#/register" target="_blank">注册</el-link>
      </div>
      <el-dropdown v-show="!isLogin">
          <el-avatar class="avatar" :src="avatar"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="dialogVisible = true">{{username}}</el-dropdown-item>
            <el-dropdown-item @click.native="UserInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="GoToWorkInfo">完善信息</el-dropdown-item>
            <el-dropdown-item @click.native="Management">内容管理</el-dropdown-item>
            <el-dropdown-item @click.native="GoToChange">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="Work">工作经历</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </el-header>
    <el-main>
      <!--路由占位符-->
      <router-view></router-view>
    </el-main>
    <!--
    <el-footer style="height:25px">
      <div>
        <span>Copyright ©2019-2020 中国地质大学武汉-王亚光, All Rights Reserved.</span>
      </div>
    </el-footer>-->
    <el-dialog
      title="更改头像"
      :visible.sync="dialogVisible"
      width="30%">
      <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/api/upload/picture"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      username: window.sessionStorage.getItem('username'),
      avatar: window.sessionStorage.getItem('avatar'),
      activeIndex: '',
      input3: '',
      select: '',
      dialogVisible: false,
      imageUrl: '',
      isLogin: window.sessionStorage.getItem('username') === null
    }
  },
  methods: {
    logout () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('http://localhost:8081/logout').then(response => {
        if (response.data !== '注销成功') this.$message.error('退出失败')
        window.sessionStorage.clear()
        this.$message.success('成功退出!')
        this.$router.push('/login')
      })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    GoToChange () {
      this.$router.push({ name: 'ChangePwd', params: { id: window.sessionStorage.getItem('uid') } })
    },
    GoToWorkInfo () {
      this.$router.push({ name: 'completeInfo', params: { id: window.sessionStorage.getItem('uid') } })
    },
    Work () {
      this.$router.push({ name: 'work' })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = res.data
      window.sessionStorage.setItem('avatar', res.data)
      this.$axios.get('userInfo/changeAvatar', {
        params: {
          avatar: res.data,
          username: window.sessionStorage.getItem('username')
        }
      }).then(response => {
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    search () {
      this.$router.push({ name: 'searchlist', params: { type: this.select, keyword: this.input3 } })
    },
    Management () {
      this.$router.push('/contentManage')
    },
    UserInfo () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('userInfo/getCount', {
        params: {
          username: window.sessionStorage.getItem('username')
        }
      }).then(response => {
        if (response.data.data === 0) this.$message.error('请先完善个人信息')
        else if (response.data.data !== 0) this.$router.push({ name: 'userInfo' })
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar {
  cursor: pointer;
}
.el-main {
  background-color: #eaedf1;
  padding: 0px;
}
.el-footer {
  text-align: center;
  height: 30px;
}
.el-menu--horizontal>.el-menu-item {
    float: left;
    height: 45px;
    line-height: 45px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}
.input-with-select {
  background-color: #fff;
}
.el-input-group_prepend {
  background-color: #fff;
}
.el-select {
  width: 105px;
}
.el-input {
  width: 450px;
}
.el-button {
  padding: 12px 11px;
}
</style>
